<template>
    <div class="bairong">
        <div class="order-bgc">
            <div class="putSupplier">
            <div class="list-wrapper">
                <div class="img-top">
                <img class="risk-img-top" src="@/assets/images/risk-img-top.png" />
                <div class="top-content">
                    <div class="flex-align-center" style="align-items: flex-end;">
                        <div class="top-title">风控报告</div>
                        <div class="top-txt" style="margin-left: 12px;">报告编号：{{info.orderNo}}</div>
                    </div>
                    <div class="mt20">
                        <div class="top-txt">报告生成时间：{{info.baiRongTime }}</div>
                    </div>
                    </div>
                </div>
                <div class="header flex-between-center">
                    <div class="result-info" :class="form.scoreafconsoff.list.length == 0 ? 'result-info-success' : ''">
                    
                    <img style="width: 32px;height: 32px;" v-if="form.scoreafconsoff.list.length == 0" src="@/assets/images/result-success.png"/>
                    <img style="width: 32px;height: 32px;" v-else src="@/assets/images/result-fail.png"/>
                    
                    <div style="margin-left: 12px;font-weight: bold;">{{form.scoreafconsoff.list.length == 0 ? '已通过！' : '未通过！'}} </div>
                    </div>
                    <div class="left">
                        <div class="flex-align-center">
                        <div class="user-name">{{info.name}}</div>
                        <div class="age">年龄：{{info.age}}</div>
                        <div class="gender">性别：{{info.sexCode==1?'女':'男'}}</div>
                        </div>
                        <div>
                        <div><span class="left-userinfo">手机号码：</span><span class="right-userinfo">{{info.phone}}</span></div>
                        <div style="margin-top: 12px;"><span class="left-userinfo">身份证号：</span><span class="right-userinfo">{{info.idCard}}</span></div>
                        </div>
                    </div>
                    <div class="right">
                    <div class="flex-align-center">
                        <div class="green-lable" :class="form.black_status==1? 'red-lable':''"><span style="color: #1f1f1f;">高风险区：</span>{{form.black_status == 1 ? '已命中' : '未命中'}}</div>
                        <div class="green-lable" :class="form.address_status==1? 'red-lable':''" style="margin-left: 24px;"><span style="color: #1f1f1f;">平台黑名单：</span>{{form.address_status == 1 ? '已命中' : '未命中'}}</div>
                    </div>
                    <div>
                        <div><span class="left-userinfo">号码归属地：</span><span class="right-userinfo">{{info.phonePlace || '-'}}</span></div>
                        <div style="margin-top: 12px;"><span class="left-userinfo" style="margin-top: 24px;">户籍所在地：{{info.idCardAddress || '-' }}</span></div>
                    </div>
                    </div>
                </div>
            </div>

            <div class="tip-content mt20">
                <img class="tip-icon-img" src="@/assets/images/icon-tip.png"/>
                <div class="">
                <div>高风险区域是根据收货人地址进行大数据匹配，若民众则显示区域的具体信息；平台黑名单是根据用户的注册信息进行大数据匹配，若民众则显示民众状态。PS：风控报告的归属权属于XX平台，请勿对外泄露用户的风控数据。</div>
                </div>
            </div>
            
            <div class="list-wrapper">
                <div class="" v-for="(item, index) in form.applyloanc">
                    <div  v-for="(itemn, indexn) in item.son">
                    <div class="acea-row row-middle">
                        <div class="lable-left"></div>
                        <div class="label">{{item.time}}{{ itemn.type }}</div>
                    </div>
                        <div class="list33 mt20">
                        <div class="item" v-for="(itemm, indexm) in itemn.grandson">
                            <div class="item-title">
                                {{itemm.name}}
                            </div>
                            <div class="item-content">
                                {{itemm.num}}
                            </div>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="mt20" v-if="form.applyloanstr && form.applyloanstr.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.applyloanstr.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.applyloanstr.list">
                    <div class="item-title">
                        {{item.name}}
                    </div>
                    <div class="item-content">
                        {{item.num}}
                    </div>
                    </div>
                </div>
                </div>

                <div v-for="(item, index) in form.applyloanusury">
                    <div  v-for="(itemn, indexn) in item.son">
                    <div class="acea-row row-middle">
                        <div class="lable-left"></div>
                        <div class="label">{{item.time}}{{ itemn.type }}</div>
                    </div>

                    <div class="list33 mt20">
                        <div class="item" v-for="(itemm, indexm) in itemn.grandson">
                            <div class="item-title">
                                {{itemm.name}}
                            </div>
                            <div class="item-content">
                                {{itemm.num}}
                            </div>
                        </div>
                    </div>
                    </div>
                </div>

                <div class="mt20" v-if="form.executionjud && form.executionjud.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.executionjud.title}}</div>
                </div>
                <div class="list100 mt20">
                    <div class="item" v-for="(item, index) in form.executionjud.list">
                    <div class="item-content">
                        {{item.body}} / {{item.caseCause}} / {{item.caseNo}} / {{item.court}} / {{item.dataType}} / {{item.caseCause}} / {{item.foundation}} / {{item.judgeResult}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.executionlimited && form.executionlimited.sx.length">
                <div class="list100 mt20">
                    <div class="item" v-for="(item, index) in form.executionlimited.sx">
                        <div class="item-content">
                            {{item.areaname}} / {{item.casecode}} / {{item.courtname}} / {{item.datatype}} / {{item.gistcid}} / {{item.iname}} / {{item.publishdate}} / {{item.regdate}} / {{item.sexname}} / {{item.signalDesc}}
                        </div>
                    </div>
                </div>
                </div>

                <div class="mt20">
                <div class="list100 mt20" v-if="form.executionlimited && form.executionlimited.xg.length">
                    <div class="item" v-for="(item, index) in form.executionlimited.xg">
                        <div class="item-content">
                            {{item.areaname}} / {{item.casecode}} / {{item.courtname}} / {{item.datatype}} / {{item.gistcid}} / {{item.iname}} / {{item.publishdate}} / {{item.regdate}} / {{item.sexname}} / {{item.signalDesc}}
                        </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.fraudrelation_g && form.fraudrelation_g.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.fraudrelation_g.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.fraudrelation_g.list">
                    <div class="item-title">
                        {{item.name}}
                    </div>
                    <div class="item-content">
                        {{item.value}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.rule_c_telcheck_s && form.rule_c_telcheck_s.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rule_c_telcheck_s.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.rule_c_telcheck_s.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.rule_c_telperiod && form.rule_c_telperiod.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rule_c_telperiod.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.rule_c_telperiod.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.rule_d_applyloanc && form.rule_d_applyloanc.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rule_d_applyloanc.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.rule_d_applyloanc.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.rule_d_applyloanusury && form.rule_d_applyloanusury.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rule_d_applyloanusury.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.rule_d_applyloanusury.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                
                <div class="mt20" v-if="form.rule_d_fraudrelation_g && form.rule_d_fraudrelation_g.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rule_d_fraudrelation_g.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.rule_d_fraudrelation_g.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                
                <div class="mt20" v-if="form.ruleapplyloan_conson && form.ruleapplyloan_conson.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.ruleapplyloan_conson.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.ruleapplyloan_conson.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.ruleexecutionjud && form.ruleexecutionjud.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.ruleexecutionjud.title}}</div>
                </div>
                <div class="list50 mt20">
                    <div class="item" v-for="(item, index) in form.ruleexecutionjud.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>

                <div class="mt20" v-if="form.ruleexecutionlimited && form.ruleexecutionlimited.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.ruleexecutionlimited.title}}</div>
                </div>
                <div class="list mt20">
                    <div class="item" v-for="(item, index) in form.ruleexecutionlimited.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>
                
                <div class="mt20" v-if="form.rulespeciallist_c && form.rulespeciallist_c.list.length">
                <div class="acea-row row-middle">
                    <div class="lable-left"></div>
                    <div class="label">{{form.rulespeciallist_c.title}}</div>
                </div>
                <div class="list mt20">
                    <div class="item" v-for="(item, index) in form.rulespeciallist_c.list">
                    <div class="item-title">
                        {{item.name_rule}}
                    </div>
                    <div class="item-content">
                        {{item.weight}}
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'BaiRong',
        props: ['info'],
        data () {
            return {
                form:{}
            }
        },
        watch:{
            info(){
                if(this.info.baiRongJson){
                    this.form = JSON.parse(this.info.baiRongJson)
                }
            }
        },
        created () {
            if(this.info.baiRongJson){
                this.form = JSON.parse(this.info.baiRongJson)
            }
        },
        methods: {
           
        }
    }
</script>

<style lang="scss" scoped>
.bairong{
    padding:20px;
}
.putSupplier{
    .img-top {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 14%;
      .risk-img-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .top-content {
        position: absolute;
        top: 20px;
        left: 30px;

        .top-title {
          font-size: 32px;
          font-weight: bold;
          color: #1F1F1F;
        }

        .top-txt {
          font-size: 14px;
          color: #567199;
        }
      }
    }

    .header{
      height: 136px;
      margin-top: 20px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }    
      .right {
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }     
    }
}

.list33 {
    width: 100%;
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;

    .item {
        flex: 33.33%;
        width: 33.33%;
        border: 1px solid #F0F2F5;
        box-sizing: border-box;
        .item-title {
            border-bottom: 1px solid #F0F2F5;
            background-color: #FAFBFC;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            color: #1F1F1F;
        }
        
        .item-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
        }
    }
}

.list50 {
    width: 100%;
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;

    .item {
        flex: 50%;
        width: 50%;
        border: 1px solid #F0F2F5;
        box-sizing: border-box;
        .item-title {
            border-bottom: 1px solid #F0F2F5;
            background-color: #FAFBFC;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            color: #1F1F1F;
        }
        
        .item-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
        }
    }
}

.list100 {
  width: 100%;
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;

  .item {
      width: 100%;
      border: 1px solid #FAFBFC;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #F0F2F5;
      padding: 8px 12px;
  }
}
.label {
    font-weight: bold;
    // border-left: 4px solid #1890FF;
    padding-left: 12px;
    color: #1F1F1F;
    font-size: 18px;

}
.list {
    width: 100%;
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;

    .item {
        flex: 25%;
        width: 25%;
        border: 1px solid #FAFBFC;
        box-sizing: border-box;
        .item-title {
            border-bottom: 1px solid #F0F2F5;
            background-color: #FAFBFC;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            color: #1F1F1F;
        }
        
        .item-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            font-weight: bold;
        }
    }
}
.user-name {
  font-size: 32px;
  color: #1F1F1F;
  font-weight: bold;
}
.age {
  margin-left: 12px;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #5A88CC;
  color: #5A88CC;
}
.gender {
  margin-left: 12px;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #5A88CC;
  color: #5A88CC;
}
.left-userinfo {
  color: #6884AD;
}
.right-userinfo {
  color: #1F1F1F;
}
.result-info {
  width: 316px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; 
  background: linear-gradient(135deg, #FF707A 0%, #FF5252 100%);
  border-radius: 8px;
  margin-right: 24px;
  color: #fff;
  font-size: 24px;
}
.result-info-success {
  background: linear-gradient(135deg, #00E078 0%, #00CC7A 100%);
}
.tip-content {
  background: rgba(255,105,51,0.08);
  border-radius: 8px;
  padding: 16px;
  color: #E05A00;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tip-icon-img {
  width: 24px;
  height: 26px;
  margin-right: 12px;
}
</style>
